<template>
  <div class="order">
      <div class="middle">
      <i>我的订单</i>
      <img class="pic" src="myimg/2.png" alt="" />
    </div>
    <div class="center">
      <div class="box" v-for="(v,i) in this.$store.state.myorder.obj" :key="i">
        <img :src="v.img" /><a href="#"
          >{{v.text}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    created(){
        this.$store.dispatch("myorder")
    }
}
</script>

<style scoped>
.middle {
  width: 100%;
  height: 0.43rem;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.05rem;
}
.middle span {
  display: inline-block;
  font-size: 0.2rem;
  transform: translateX(-0.6rem);
}
.middle i {
  display: inline-block;
  font-style: normal;
  font-size: 0.16rem;
  line-height: 0.16rem;
  text-indent: 0.22rem;
}
.middle img{
    width: 0.16rem;
  height: 0.16rem;
  background-color: #fff;
  transform: translateX(-0.1rem);
}
.center {
  width: 100%;
  height: 0.76rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.center .box {
  width: 25%;
  height: 0.76rem;
 transform: translateY(0.13rem);
}
.center .box img {
  width: 0.4rem;
  height: 0.4rem;
  transform: translateY(-0.6rem);
}
.center .box a {
  font-size: 0.12rem;
  color: #666666;
  display: block;
  transform: translateY(-0.8rem);
}
</style>